<!-- 底部播放器 -->
<template>
  <div class="player" v-show="this.$store.state.songShow">
    <div class="box" v-if="musicD">
      <div class="logo_singer" @click="toSing">
        <div class="imgLogo">
          <img :src="musicD.uiElement.image.imageUrl" alt="" />
        </div>
        <div class="singer">
          <span>{{ musicD.uiElement.mainTitle.title }}</span>
          <span>横滑可以切换上下曲哦</span>
        </div>
      </div>

      <div class="icon">
        <div class="icon_play">
          <div class="play" @click="play">
            <span
              :class="
                this.$store.state.audioControl.isPlaying
                  ? 'iconfont icon-zanting'
                  : 'iconfont icon-bofang1'
              "
            ></span>
          </div>
        </div>

        <div class="playList">
          <span class="iconfont icon-bofangliebiao"></span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  props: {
    showSing: {
      default: 1,
    },
  },
  data() {
    //这里存放数据
    return {
      musicD: false,
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {

    //监听有没有歌曲,有的话就赋值给data
    "$store.state.audioControl.musicData": {
      deep: true, //深度监听
      handler(newV, oldV) {
        //这个函数必须叫handler,
        //深度监听一个对象的时候,这两个形参对应的都是新值
        console.log(newV, oldV);
        if (newV.valid) {
          this.musicD = newV;
        }
      },
    },
  },
  //方法集合
  methods: {
    //播放暂停
    play() {
      let play = this.$store.state.audioControl.isPlaying;
      if (play) {
        this.$store.commit("isPlaying", !play);
      } else {
        this.$store.commit("isPlaying", true);
      }
    },

    //点击底部播放标签,跳转详情页
    toSing() {
      this.$store.commit("alterSingShow", true);
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="scss">
audio {
  position: fixed;
  top: 100px;
  left: 0;
}
.player {
  width: 100%;
  height: 45px;
  position: fixed;
  bottom: 0;
  left: 0;
  border-top: 1px solid #f3f3f3;
  // opacity: .7;
  z-index: 2;
  .box {
    // width: 100%;
    height: 100%;

    background: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .logo_singer {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      .imgLogo {
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-left: 6px;
        img {
          width: 35px;
          height: 35px;
          border-radius: 50%;
        }
      }
      .singer {
        display: flex;
        flex-flow: column wrap;
        justify-content: center;
        align-items: start;
        width: 100%;
        margin-left: 6px;
        span:nth-child(1) {
          font-size: 12px;
          color: #3d3d3d;
        }
        span:nth-child(2) {
          font-size: 9px;
          color: #a6a6a6;
          // transform: scale(.8);
        }
      }
    }

    .icon {
      display: flex;
      justify-content: space-between;
      .icon_play {
        padding: 0 12px;
        display: flex;
        justify-content: center;
        align-items: center;
        .play {
          width: 29px;
          height: 29px;
          color: black;
          border: 2px solid black;
          border-radius: 50%;
          text-align: center;
          line-height: 27px;
          .icon-bofang1 {
            font-size: 11px;
            color: black;
            margin-left: 4px;
            font-weight: bold;
          }
          .icon-zanting {
            font-size: 11px;
            color: #de1213;
            font-weight: bold;
          }
        }
      }
      .playList {
        padding: 0 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        .icon-bofangliebiao {
          font-size: 22px;
          color: black;
        }
      }
    }
  }
}
</style>
